<template>
  <div>
    <input
      @focus="isFocus = true"
      @blur="isFocus = false"
      :class="{ inputFocus: isFocus, inputBlur: !isFocus }"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isFocus: false,
    };
  },
};
</script>

<style scoped>
input {
  width: 10px;
  transition: all 1s;
}
.inputFocus {
  width: 150px;
}
.inputBlur {
  width: 10px;
}
</style>